.aricles-tool-container {
  display: flex;
  flex-direction: row-reverse;
  background: #FFFFFF;
  box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.05);
  border-radius: 4px 4px 4px 4px;

  padding: 32px 12px 32px 20px;
  align-items: center;
  justify-content: space-between;

  .aricles-tool-header {
    width: 310px;

    .aricles-tool-header-title {
      font-weight: 600;
      font-size: 36px;
      color: #4E4E4E;
      line-height: 67px;
      text-underline-offset: 8px;
      text-decoration: underline solid #1E60C5 6px;
      text-align: right;
    }

    .aricles-tool-header-subtext {
      font-weight: 400;
      font-size: 28px;
      color: #C9C9C9;
      text-align: right;
    }
  }

  .aricles-tool-content {
    flex: 1;
    display: flex;
    gap: 24px;
    justify-content: space-around;

    .aricles-tool-btn {
      flex: 1;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;

      border-radius: 4px;
      padding: 12px 24px;

      font-weight: 600;
      font-size: 20px;
      color: #FFFFFF;

      height: 96px;

      > div {
        //height: 72px;
        line-height: 2;
        text-align: center;
        display: -webkit-box; /* 必须 */
        -webkit-box-orient: vertical; /* 必须 */
        -webkit-line-clamp: 2; /* 限制行数 */
        overflow: hidden;
      }

      &.aricles-tool-btn-1, &.aricles-tool-btn-orange {
        background-color: #e67c3a;
      }

      &.aricles-tool-btn-2, &.aricles-tool-btn-blue {
        background-color: #3b96e8;
      }

      &.aricles-tool-btn-3, &.aricles-tool-btn-green {
        background-color: #1dc187;
      }
    }
  }
}

@media (max-width: @screen-md-max) {
  .aricles-tool-container {
    display: block;
    padding: 0;
    background: transparent;
    box-shadow: none;
    border-radius: unset;

    .aricles-tool-header {
      display: flex;
      align-items: baseline;
      width: 100%;
      gap: 4px;

      .aricles-tool-header-title {
        text-align: left;
      }

      .aricles-tool-header-subtext {
        display: none;
      }
    }

    .aricles-tool-content {
      flex-direction: column;
      margin-top: 24px;
      background: #FFFFFF;
      box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.05);
      border-radius: 4px 4px 4px 4px;
      padding: 16px;
    }
  }
}
